<!DOCTYPE html>
<html>
<head>
    <title>EduBot - 视频行为分析</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="EduBot视频处理平台，基于深度学习算法实现高精度课堂行为分析，支持学生行为检测、异常行为识别与数据可视化，提升教学质量监测能力">
    <meta name="keywords" content="EduBot,教育小助手,视频处理平台,AI视频分析,教学监测系统,郑恩赐技术团队,教育AI平台,深度学习应用,教学评估系统,教育大数据分析,智能课堂管理,异常行为检测,教育技术解决方案">
    <link rel="icon" type="image/png" href="static/icons/AiKeTangJiaoXuePingCeXiTong.png">
    <!-- 引入Font Awesome图标库 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

    <style>
        body {
            margin: 0;
            padding: 0;
            background: linear-gradient(135deg, #0a192f, #112240, #1a365d, #0a192f);
            color: #fff;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            overflow-x: hidden;
        }
        .container {
            width: 90%;
            max-width: 1000px;
            padding: 30px;
            margin: 20px auto;
            border-radius: 16px;
            background: rgba(10, 25, 47, 0.7);
            backdrop-filter: blur(15px);
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
            animation: fadeIn 0.8s ease-out;
            border: 1px solid rgba(64, 156, 255, 0.1);
        }
        .nav-buttons {
            display: flex;
            justify-content: space-between;
            gap: 15px;
            margin-bottom: 30px;
        }
        .nav-btn {
            padding: 12px 20px;
            background: linear-gradient(45deg, #409cff, #00d1ff);
            color: #fff;
            border: none;
            border-radius: 50px;
            cursor: pointer;
            box-shadow: 0 4px 15px rgba(64, 156, 255, 0.3);
            transition: all 0.3s ease;
            font-size: 1em;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }
        .nav-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 6px 20px rgba(64, 156, 255, 0.5);
            background: linear-gradient(45deg, #00d1ff, #409cff);
        }
        .nav-btn:active {
            transform: translateY(1px);
        }
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        #status-container::-webkit-scrollbar {
            width: 6px;
            height: 6px;
        }
        #status-container::-webkit-scrollbar-track {
            background: rgba(255,255,255,0.1);
            border-radius: 4px;
        }
        #status-container::-webkit-scrollbar-thumb {
            background: linear-gradient(45deg, #9400D3, #00FFFF);
            border-radius: 4px;
            transition: all 0.3s ease;
        }
        #status-container::-webkit-scrollbar-thumb:hover {
            background: linear-gradient(45deg, #9400D3, #00FFFF, #FF00FF);
        }
        
        .video-upload {
            background: rgba(10, 25, 47, 0.5);
            border-radius: 12px;
            padding: 30px;
            text-align: center;
            border: 2px dashed rgba(64, 156, 255, 0.2);
            transition: all 0.3s ease;
            min-height: 300px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
        
        .video-upload:hover {
            border-color: rgba(64, 156, 255, 0.5);
            box-shadow: 0 0 15px rgba(64, 156, 255, 0.2);
        }

        #video-player {
            width: 100%;
            max-height: 60vh;
            border-radius: 10px;
            background: #000;
            object-fit: contain;
            aspect-ratio: 16/9;
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
            margin-top: 20px;
            transition: transform 0.3s ease;
        }
        
        #video-player:hover {
            transform: scale(1.01);
        }

        .action-buttons {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
            margin-top: 30px;
        }
        
        .loader {
            width: 48px;
            height: 48px;
            border: 5px solid rgba(255, 255, 255, 0.3);
            border-radius: 50%;
            border-top-color: #00FFFF;
            animation: spin 1s linear infinite;
            margin: 20px auto;
            display: none;
        }
        
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        
        .loading .loader {
            display: block;
        }
        
        #video-name {
            padding: 12px 20px;
            background: rgba(0, 0, 0, 0.3);
            border-radius: 8px;
            margin: 15px 0;
            font-size: 14px;
            transition: all 0.3s ease;
        }
        
        #upload-btn:disabled {
            opacity: 0.5;
            cursor: not-allowed;
            background: linear-gradient(45deg, #666, #999);
        }
        
        .tooltip-icon {
            cursor: help;
            margin-left: 5px;
            position: relative;
        }
        
        .tooltip-icon:hover::after {
            content: attr(title);
            position: fixed;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            background: rgba(0, 0, 0, 0.95);
            color: white;
            padding: 15px;
            border-radius: 8px;
            font-size: 14px;
            white-space: normal;
            width: 80%;
            max-width: 300px;
            z-index: 1000;
            word-wrap: break-word;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
            border: 1px solid rgba(64, 156, 255, 0.3);
        }
        
        .status-message {
            background: rgba(10, 25, 47, 0.6);
            border-left: 4px solid #409cff;
            padding: 10px;
            margin-bottom: 10px;
            border-radius: 4px;
            animation: fadeIn 0.3s ease;
            border: 1px solid rgba(64, 156, 255, 0.1);
        }
        
        .status-message:hover {
            transform: translateX(3px);
        }

        @media (max-width: 768px) {
            .container {
                padding: 20px;
                width: 95%;
                margin: 10px auto;
                margin-top: 80px;
            }
            .nav-buttons {
                flex-direction: column;
            }
            .action-buttons {
                grid-template-columns: 1fr;
            }
            #video-player {
                max-height: 40vh;
                aspect-ratio: auto;
            }
            #status-container {
                position: fixed !important;
                top: 0 !important;
                left: 0 !important;
                right: 0 !important;
                max-width: 100% !important;
                padding: 8px !important;
                max-height: 70px !important;
                background: rgba(10, 25, 47, 0.9) !important;
                border: 1px solid rgba(64, 156, 255, 0.2) !important;
                border-radius: 0 !important;
                z-index: 1000 !important;
                overflow-y: auto !important;
                display: flex !important;
                flex-direction: column-reverse !important;
            }
            .tooltip-icon:hover::after {
                width: 90%;
                max-width: none;
                font-size: 13px;
                padding: 12px;
            }
        }
    </style>
    
    <!-- 修改后 -->
    <script src="{{ url_for('static', filename='javascripts/VideoProcessing.js') }}"></script>
    <script>
        const frontEndDomain = "{{ front_end_domain_name }}";
        const backEndDomain = "{{ backend_domain_name }}";
        
        // 页面加载时检查token
        // 修改DOMContentLoaded事件监听器
        document.addEventListener('DOMContentLoaded', function() {
            checkToken();
            
            // 初始化状态容器
            if (!document.getElementById('status-container')) {
                const statusDiv = document.createElement('div');
                statusDiv.id = 'status-container';
                statusDiv.style.cssText = `
                    position: fixed;
                    top: 20px;
                    left: 20px;
                    z-index: 1000;
                    max-width: 300px;
                    max-height: 400px;
                    background: rgba(10, 25, 47, 0.8);
                    border-radius: 8px;
                    padding: 10px;
                    color: white;
                    overflow-y: auto;
                    display: flex;
                    flex-direction: column-reverse;
                    scrollbar-width: thin; /* Firefox支持 */
                    scrollbar-color: #9400D3 rgba(255,255,255,0.1); /* Firefox支持 */
                    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
                    border: 1px solid rgba(64, 156, 255, 0.1);
                `;
                document.body.appendChild(statusDiv);
            }
            
            const uploadBtn = document.getElementById('upload-btn');
            if(uploadBtn) {
                uploadBtn.addEventListener('click', showUploadForm);
            }
        });

        function checkToken() {
            const token = localStorage.getItem('token');
            if (!token) {
                window.location.href = `${frontEndDomain}/login_register_page`;
                return;
            }
        
            const controller = new AbortController();
            const timeoutId = setTimeout(() => controller.abort(), 5000);
            
            // 修改fetch请求部分，添加错误处理
            fetch(`${backEndDomain}/video_processing/check_token`, {
                method: 'POST',
                headers: {'Content-Type': 'application/x-www-form-urlencoded'},
                body: `token=${encodeURIComponent(token)}`,
                signal: controller.signal
            })
            .then(response => {
                clearTimeout(timeoutId);
                if (!response.ok) throw new Error('Network error');
                return response.json();
            })
            .then(data => {
                if (data.TF !== 'T') {
                    localStorage.removeItem('token');
                    window.location.href = `${frontEndDomain}/login_register_page`;
                }
            })
            .catch(error => {
                // 添加更详细的错误处理
                if (error.name === 'AbortError') {
                    console.warn('请求超时');
                } else {
                    console.error('请求失败:', error);
                }
                localStorage.removeItem('token');
                window.location.href = `${frontEndDomain}/login_register_page`;
            });
        }

        function logout() {
            localStorage.removeItem('token');
            window.location.href = `${frontEndDomain}/login_register_page`;
        }
      
        function handleVideoSelect(event) {
            const file = event.target.files[0];
            if (file) {
                document.getElementById('video-name').textContent = file.name;
                document.getElementById('upload-btn').disabled = false;
                document.getElementById('upload-btn').style.opacity = '1';
                
                const videoUrl = URL.createObjectURL(file);
                const videoPlayer = document.getElementById('video-player');
                
                if (videoPlayer) {
                    videoPlayer.src = videoUrl;
                } else {
                    const player = document.createElement('video');
                    player.id = 'video-player';
                    player.controls = true;
                    player.src = videoUrl;
                    player.style.width = '100%';
                    player.style.maxWidth = '800px';
                    player.style.marginTop = '20px';
                    player.style.borderRadius = '10px';
                    
                    document.querySelector('.video-upload').appendChild(player);
                }
                
                document.querySelector('.video-upload').classList.add('active');
            }
        }

        window.showUploadForm = function() {
            const uploadBtn = document.getElementById('upload-btn');
            const videoPlayer = document.getElementById('video-player');
            
            if (uploadBtn.disabled || !videoPlayer.src || videoPlayer.readyState < 1) {
                showAlert('请先选择有效的视频文件', 'warning');
                return;
            }
            
            if (isNaN(videoPlayer.duration)) {
                videoPlayer.addEventListener('loadedmetadata', showUploadForm);
                return;
            }
            
            const videoDuration = Math.floor(videoPlayer.duration);
            const defaultInterval = Math.max(1, Math.floor(videoDuration / 32));
            
            const formHtml = `
            <div id="upload-form" style="
                position: fixed;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                background: rgba(0, 0, 0, 0.95);
                padding: 30px;
                border-radius: 15px;
                z-index: 9999;
                width: 400px;
                max-width: 90%;
                box-shadow: 0 0 30px rgba(0, 255, 255, 0.3);
                border: 1px solid rgba(0, 255, 255, 0.2);
                animation: formFadeIn 0.3s ease-out;
            ">
                <h3 style="margin-top: 0; color: #00FFFF; text-align: center;">请选择检测行为类型</h3>
                <div style="margin-bottom: 20px">
                    <label style="display: block; margin-bottom: 15px; padding: 8px; border-radius: 6px; transition: all 0.2s ease; background: rgba(255,255,255,0.05); border-left: 3px solid #00FFFF;">
                        <input type="checkbox" id="select-all" style="margin-right: 10px;"> 
                        <i class="fas fa-check-double" style="margin-right: 8px; color: #00FFFF;"></i>全选
                    </label>
                    <label style="display: block; margin-bottom: 15px; padding: 8px; border-radius: 6px; transition: all 0.2s ease; background: rgba(255,255,255,0.05);">
                        <input type="checkbox" name="behavior" value="phone" style="margin-right: 10px;"> 
                        <i class="fas fa-mobile-alt" style="margin-right: 8px; color: #ee6666;"></i>使用手机
                    </label>
                    <label style="display: block; margin-bottom: 15px; padding: 8px; border-radius: 6px; transition: all 0.2s ease; background: rgba(255,255,255,0.05);">
                        <input type="checkbox" name="behavior" value="stand" style="margin-right: 10px;"> 
                        <i class="fas fa-standing-person" style="margin-right: 8px; color: #91cc75;"></i>站立
                    </label>
                    <label style="display: block; margin-bottom: 15px; padding: 8px; border-radius: 6px; transition: all 0.2s ease; background: rgba(255,255,255,0.05);">
                        <input type="checkbox" name="behavior" value="sleep" style="margin-right: 10px;"> 
                        <i class="fas fa-bed" style="margin-right: 8px; color: #fac858;"></i>趴桌
                    </label>
                    <label style="display: block; margin-bottom: 20px; padding: 8px; border-radius: 6px; transition: all 0.2s ease; background: rgba(255,255,255,0.05);">
                        <input type="checkbox" name="behavior" value="lookup" style="margin-right: 10px;"> 
                        <i class="fas fa-eye" style="margin-right: 8px; color: #73c0de;"></i>抬头
                    </label>
                    <label style="display: block; padding: 12px; border-radius: 6px; background: rgba(255,255,255,0.08);">
                        帧提取间隔（秒）：
                        <input type="number" name="interval" min="1" max="${videoDuration}" value="${defaultInterval}" style="
                            width: 60px;
                            padding: 5px;
                            background: rgba(255,255,255,0.1);
                            border: 1px solid #00FFFF;
                            border-radius: 4px;
                            color: white;
                        ">
                        <span class="tooltip-icon" title="帧提取间隔（秒）设置越小，生成结果的精度通常越高，但预处理、上传及服务器处理视频所需的时间也会相应增加。反之，较大的间隔值会降低精度，但能缩短处理时间。建议采用默认设置以平衡精度与效率。">
                            <i class="fas fa-info-circle" style="color: #00FFFF;"></i>
                        </span>
                    </label>
                </div>
                <div style="display: flex; justify-content: space-between; margin-top: 10px;">
                    <button onclick="document.getElementById('upload-form').remove()" style="
                        background: rgba(255, 69, 0, 0.8);
                        padding: 10px 20px;
                        border: none;
                        border-radius: 20px;
                        color: white;
                        cursor: pointer;
                        transition: all 0.3s ease;
                    "><i class="fas fa-times"></i> 取消</button>
                    <button onclick="window.submitUploadForm()" style="
                        background: rgba(0, 250, 154, 0.8);
                        padding: 10px 20px;
                        border: none;
                        border-radius: 20px;
                        color: black;
                        cursor: pointer;
                        transition: all 0.3s ease;
                    "><i class="fas fa-cloud-upload-alt"></i> 确认上传</button>
                </div>
            </div>
            
            <style>
                @keyframes formFadeIn {
                    from { opacity: 0; transform: translate(-50%, -60%); }
                    to { opacity: 1; transform: translate(-50%, -50%); }
                }
                #upload-form label:hover {
                    background: rgba(255,255,255,0.1);
                    transform: translateX(3px);
                }
                #upload-form button:hover {
                    transform: translateY(-2px);
                    filter: brightness(1.1);
                }
            </style>`;
            
            const oldForm = document.getElementById('upload-form');
            if (oldForm) oldForm.remove();
            
            document.body.insertAdjacentHTML('beforeend', formHtml);
            
            // 添加全选功能
            const selectAllCheckbox = document.getElementById('select-all');
            const behaviorCheckboxes = document.querySelectorAll('input[name="behavior"]');
            
            selectAllCheckbox.addEventListener('change', function() {
                const isChecked = this.checked;
                behaviorCheckboxes.forEach(checkbox => {
                    checkbox.checked = isChecked;
                });
            });
            
            // 当单个行为选项改变时，更新全选状态
            behaviorCheckboxes.forEach(checkbox => {
                checkbox.addEventListener('change', function() {
                    const allChecked = Array.from(behaviorCheckboxes).every(cb => cb.checked);
                    const anyChecked = Array.from(behaviorCheckboxes).some(cb => cb.checked);
                    
                    selectAllCheckbox.checked = allChecked;
                    selectAllCheckbox.indeterminate = anyChecked && !allChecked;
                });
            });
        };

        window.submitUploadForm = function() {
            const form = document.getElementById('upload-form');
            if (!form) {
                showAlert('上传表单不存在', 'error');
                return;
            }
            
            const videoFile = document.getElementById('video-select').files[0];
            if (!videoFile) {
                showAlert('请先选择视频文件', 'warning');
                return;
            }
            
            const videoName = videoFile.name;
            const uploadBtn = document.getElementById('upload-btn');
            
            const selectedBehaviors = Array.from(form.querySelectorAll('input[name="behavior"]:checked'))
                .map(el => {
                    switch(el.value) {
                        case 'phone': return 'use_phone';
                        case 'sleep': return 'head_on_desk'; 
                        case 'lookup': return 'look_up';
                        default: return el.value;
                    }
                });
            
            const intervalValue = form.querySelector('input[name="interval"]').value;
            
            if (selectedBehaviors.length === 0) {
                showAlert('请至少选择一个要检测的行为类别！', 'warning');
                return;
            }
            
            const taskId = addStatusMessage(
                videoName, 
                '正在处理中...', 
                '请不要退出该页面，否则将中断处理', 
                'info',
                selectedBehaviors,
                parseInt(intervalValue)
            );
            
            form.style.transition = 'opacity 0.3s ease';
            form.style.opacity = '0';
            setTimeout(() => {
                if (form && form.parentNode) {
                    form.remove();
                }
            }, 300);
            
            const token = localStorage.getItem('token');
            
            processVideoFile({ 
                videoFile: videoFile,
                interval: parseInt(intervalValue)
            })
            .then(result => {
                updateStatusMessage(taskId, '正在上传中...', '请不要退出该页面', 'info');
                
                const processedVideo = new File([result.blob], videoName, { type: videoFile.type });
                
                const formData = new FormData();
                formData.append('video', processedVideo);
                formData.append('classes', selectedBehaviors.join(','));
                formData.append('seconds', intervalValue);
                formData.append('token', token);
                
                return fetch(`${backEndDomain}/video_processing/process_video`, {
                    method: 'POST',
                    body: formData
                });
            })
            .then(response => response.json())
            .then(data => {
                if (data.TF === 'T') {
                    updateStatusMessage(taskId, '上传成功', '', 'success');
                    document.getElementById('result-btn').disabled = false;
                } else {
                    throw new Error(data.message || '视频处理失败');
                }
            })
            .catch(error => {
                console.error('视频处理失败:', error);
                updateStatusMessage(taskId, '上传失败', error.message, 'error');
                showAlert('视频处理失败: ' + error.message, 'error');
                
                if(uploadBtn) {
                    uploadBtn.disabled = false;
                    uploadBtn.innerHTML = '<i class="fas fa-cloud-upload-alt"></i> 上传视频';
                }
            });
        };
        
        function addStatusMessage(title, status, description, type, behaviors, interval) {
            const statusContainer = document.getElementById('status-container');
            if (!statusContainer) return null;
            
            const messageId = `status-${Date.now()}`;
            const timestamp = new Date().toLocaleTimeString();
            
            const formatInterval = (seconds) => {
                const mins = Math.floor(seconds / 60);
                const secs = seconds % 60;
                return `${mins}:${secs.toString().padStart(2, '0')}`;
            };
            
            const behaviorMap = {
                'use_phone': '使用手机',
                'stand': '站立',
                'head_on_desk': '趴桌',
                'look_up': '抬头'
            };
            
            const chineseBehaviors = behaviors ? behaviors.map(b => behaviorMap[b] || b) : [];
            
            const messageDiv = document.createElement('div');
            messageDiv.id = messageId;
            messageDiv.className = 'status-message';
            messageDiv.style.cssText = `
                background: rgba(10, 25, 47, 0.6);
                border-left: 4px solid ${getStatusColor(type)};
                padding: 10px;
                margin-bottom: 10px;
                border-radius: 4px;
                animation: fadeIn 0.3s ease;
                border: 1px solid rgba(64, 156, 255, 0.1);
            `;
            
            messageDiv.innerHTML = `
                <div style="font-weight: bold; margin-bottom: 5px">${escapeHtml(title)}</div>
                <div style="display: flex; justify-content: space-between">
                    <span>${escapeHtml(status)}</span>
                    <small>${timestamp}</small>
                </div>
                ${description ? `<div style="font-size: 0.8em; margin-top: 5px">${escapeHtml(description)}</div>` : ''}
                ${behaviors ? `<div style="font-size: 0.8em; margin-top: 5px">检测行为: ${escapeHtml(chineseBehaviors.join(', '))}</div>` : ''}
                ${interval ? `<div style="font-size: 0.8em; margin-top: 5px">帧处理时间间隔(分:秒): ${formatInterval(interval)}</div>` : ''}
            `;
            
            statusContainer.insertBefore(messageDiv, statusContainer.firstChild);
            
            statusContainer.scrollTop = 0;
            return messageId;
        }

        function updateStatusMessage(id, status, description, type) {
            const messageDiv = document.getElementById(id);
            if (!messageDiv) return;
            
            const statusElement = messageDiv.querySelector('div > span');
            const descElement = messageDiv.querySelector('div:last-child');
            
            if (statusElement) statusElement.textContent = status;
            if (descElement && description) descElement.textContent = description;
            
            messageDiv.style.borderLeftColor = getStatusColor(type);
            
            messageDiv.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
        }

        function getStatusColor(type) {
            const colors = {
                success: '#00ff9d',
                error: '#ff4d4d',
                warning: '#ffb800',
                info: '#409cff'
            };
            return colors[type] || colors.info;
        }

        function escapeHtml(unsafe) {
            if (!unsafe) return '';
            return unsafe.toString()
                .replace(/&/g, "&amp;")
                .replace(/</g, "&lt;")
                .replace(/>/g, "&gt;")
                .replace(/"/g, "&quot;")
                .replace(/'/g, "&#039;");
        }
        
        function showAlert(message, type = 'info') {
            const alertDiv = document.createElement('div');
            alertDiv.style.cssText = `
                position: fixed;
                top: 20px;
                right: 20px;
                padding: 15px 25px;
                background: ${getStatusColor(type)};
                color: white;
                border-radius: 5px;
                z-index: 9999;
                box-shadow: 0 4px 12px rgba(0,0,0,0.15);
                animation: fadeIn 0.3s ease;
            `;
            alertDiv.textContent = message;
            
            document.body.appendChild(alertDiv);
            
            setTimeout(() => {
                alertDiv.style.transition = 'opacity 0.5s ease';
                alertDiv.style.opacity = '0';
                setTimeout(() => {
                    if (alertDiv.parentNode) {
                        alertDiv.parentNode.removeChild(alertDiv);
                    }
                }, 500);
            }, 3000);
        }
    </script>
</head>
<body>
    <h1 style="display: none;">EduBot - 视频行为分析</h1>
    <div id="status-container" style="
        position: fixed;
        top: 20px;
        left: 20px;
        z-index: 1000;
        max-width: 300px;
        max-height: 400px;
        background: rgba(10, 25, 47, 0.8);
        border-radius: 8px;
        padding: 10px;
        color: white;
        overflow-y: auto;
        display: flex;
        flex-direction: column-reverse;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
        border: 1px solid rgba(64, 156, 255, 0.1);
    "></div>
    <div class="container">
        <div class="nav-buttons">
            <button class="nav-btn" onclick="window.location.href='{{ front_end_domain_name }}/navigation_page'">
                <i class="fas fa-arrow-circle-left"></i> 返回导航页面
            </button>
            <button class="nav-btn" onclick="document.getElementById('video-select').click()">
                <i class="fas fa-folder-open"></i> 选择视频文件
            </button>
            <button class="nav-btn" onclick="logout()">
                <i class="fas fa-sign-out-alt"></i> 退出登录
            </button>
        </div>
        
        <div class="video-upload">
            <input type="file" id="video-select" accept="video/*" hidden onchange="handleVideoSelect(event)">
            <div id="video-info">
                <div id="video-name" style="color: #aaa; margin: 15px 0">
                    <i class="fas fa-film"></i> 未选择任何文件
                </div>
            </div>
            <div id="loader" class="loader"></div>
            <video id="video-player" controls style="display:none;"></video>
        </div>

        <div class="action-buttons">
            <button id="upload-btn" class="nav-btn" style="opacity: 0.5" disabled>
                <i class="fas fa-cloud-upload-alt"></i> 上传视频
            </button>
            <button id="result-btn" class="nav-btn" onclick="window.location.href='{{ front_end_domain_name }}/video_processing_result_page'">
                <i class="fas fa-chart-bar"></i> 查看处理结果
            </button>
        </div>
    </div>
    
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            document.getElementById('video-select').addEventListener('change', function() {
                if (this.files.length > 0) {
                    document.getElementById('video-player').style.display = 'block';
                }
            });
        });
    </script>
</body>
</html>



